<template>
  <div>
    <div class="searchWrapper">
      <!-- 搜索 -->
      <van-search
        placeholder="请输入搜索关键词"
        shape="round"
        @focus="onFocus"
        input-align="center"
        class="searchInput"
      />
      <!-- 预留类目的 -->
      <div class="categoryWrapper">
        <div
          @click="changeCategory('')"
          class="categoryItem"
        >
          <img src="../../assets/images/all.png">
          <p>全部</p>
        </div>
        <div
          class="categoryItem"
          v-for="(item,index) in category"
          :key="index"
          @click="changeCategory(item.id)"
        >
          <img :src="imgBaseUrl+item.picUrl">
          <p>{{item.categoryName}}</p>
        </div>
      </div>
    </div>
    <div class="content-wrapper">
      <div class="content">
        <van-list
          v-model="loading"
          loading-text="更多礼品正在备货中"
          :finished="finished"
          @load="getList"
        >
          <ul
            class="gift-ul"
            v-if="list.length>0"
          >
            <router-link
              class="gift-item"
              tag="li"
              :to="{path: item.buyLimit === 0 ? '/error':'/points/detail', query:{ id: item.id }}"
              v-for="(item, index) in list"
              :key="index"
            >
              <div class="gift-pic">
                <img
                  v-lazy="imgBaseUrl + item.ico"
                  alt
                  class="pic"
                >
              </div>
              <div class="info">
                <h2 class="name">{{item.title}}</h2>
                <div class="bottom_info">
                  <div>
                    <p>¥ {{item.price}}</p>
                    <del>￥{{item.oPrice}}</del>
                    <p>库存：{{item.limitNum}}</p>
                  </div>
                  <button
                    class="exchange-btn"
                    :class="{'no-stock':item.limitNum===0}"
                  >{{item.limitNum !==0 ? '立即购买' : '敬请期待'}}</button>
                </div>
              </div>
            </router-link>
          </ul>
        </van-list>
        <div
          class="end"
          v-if="list.length>0&&!loading"
        >我们是没有底线的，更多商品正在备货中</div>
        <no-data
          txt="更多礼品正在备货中~"
          v-if="list.length<1 && !loading"
        />
      </div>

      <!-- <fixed-btn url="mycoupon" :data="['我兑','换的']"/> -->
    </div>
    <transition mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import { List, Search } from 'vant';
import noData from '@/components/noData/nodata';
import { imgBaseUrl } from '@/config/env';
export default {
  data() {
    return {
      imgBaseUrl,
      list: [],
      category: [],
      loading: false,
      finished: false,
      tabsParam: ['积分礼遇', '沃德生日礼遇'], // 这个也可以用对象key，value来实现
      pageNum: 1,
      autoFixed: false,
      userInfo: [],
      cid: '',
      categoryId: '', // 分类id
      menuData: [],
      tid: [], // 装不显示优惠截止日期
      timer: true
    };
  },
  mounted() {
    this.getCategory();
  },
  methods: {
    changeCategory(index) {
      this.categoryId = index;
      this.list = [];
      this.loading = false;
      this.finished = false;
      this.pageNum = 1;
      this.getList();
    },
    getCategory() {
      this.$http.post('/product/category').then(res => {
        console.log(res);
        this.category = res.data;
      });
    },
    getList() {
      setTimeout(() => {
        this.$http
          .post('/product/list', {
            pageNum: this.pageNum.toString(),
            pageSize: '10',
            productType: '0',
            cateId: this.categoryId
          })
          .then(res => {
            if (res && res.data.code === '0') {
              res.data.object.list.map(n => {
                // 循环添加到数组
                this.list.push(n);
              });
              this.loading = false;
              this.pageNum = this.pageNum + 1; // 页数累加
              if (res.data.object.pageNum >= res.data.object.pages) {
                this.finished = true; // 最后一页加载结束
              }
            }
          });
      }, 200);
    },
    onFocus() {
      this.$router.push('/search');
    }
  },
  components: {
    noData,
    'van-list': List,
    'van-search': Search
  },
  watch: {
    $route() {
      console.log(this.$router.history.current);
      // 监听返回事件,强制返回首页
      // window.onpopstate = () => {
      //   if (this.$router.history.current.name === 'points') {
      //     console.log(this);
      //     this.$router.replace('home'); // 输入要返回的上一级路由地址
      //   }
      // };
    }
  }
};
</script>

<style lang="scss" scoped>
.searchWrapper {
  background-color: #ffffff;
  margin-bottom: 0.4rem;
}
.categoryWrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .categoryItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.5rem;
    width: 25%;
    img {
      width: 1.09rem;
      height: 1.09rem;
    }
    p {
      font-size: 0.32rem;
      color: #6b6b6b;
    }
  }
}
.categoryWrapper:after {
  content: '';
  flex: auto;
}
.content-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.content {
  overflow: hidden;
}

.fixed_toolbar {
  position: fixed;
  width: 100%;
  top: 0;
  background-color: #f5f5f5;
  z-index: 88;
  transform: translateZ(0);
  .classify {
    display: flex;
    padding: 30px 21px;
    flex-wrap: wrap;
    top: 1.28rem;
    background-color: #fff;
    border-bottom: 0.013rem solid #dddddd;
    overflow: hidden;
    cursor: pointer;
    div {
      width: 23.2%;
      height: 70px;
      border-radius: 8px;
      margin: 0 0.084rem;
      display: flex;
      justify-content: center;
      align-items: center;
      @include sc(30px, #333);
      &.active {
        border: solid 1px #1882fd;
        color: #1882fd;
      }
    }
  }
}
.banner-wrapper {
  background-color: #fff;
  .banner {
    width: 100%;
  }
  .prompt {
    background-color: #fff;
    padding: 16px 30px;
    @include sc(28px, #2e2e2e);
    word-break: break-all;
    border-bottom: 20px solid #f5f5f5;
    span {
      padding: 0 5px;
      color: #fd0101;
    }
    p {
      color: #fd0101;
    }
  }
}
.header {
  width: 100%;
  height: 88px;
  background-color: #ffffff;
  display: flex;
  z-index: 9;
  border-bottom: 1px solid #f5f5f5;
  .item {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 88px;
    @include sc(32px, $black);
    border-bottom: 5px solid #fff;
  }
  .item.active {
    color: #3889ff;
    border-bottom: 5px solid #3889ff;
  }
  &.fixed {
    position: fixed;
    top: 88px;
    width: 100%;
  }
}
.gift-ul {
  background-color: #ffffff;
  display: flex;
  padding: 20px 20px 0 20px;
  flex-wrap: wrap;
  justify-content: space-between;
  .gift-item {
    width: 48.5%;
    // height: 515px;
    padding-bottom: 20px;
    background-color: #ffffff;
    box-shadow: 0 0 10px #cecece;
    position: relative;
    margin-bottom: 20px;
    &:last-child {
      border-bottom: none;
    }
    .gift-pic {
      height: 330px;
      display: flex;
      align-items: center;
      justify-content: center;
      .pic {
        height: 100%;
        width: 100%;
      }
    }
    .info {
      padding: 0 20px;
      .name {
        @include sc(28px, #000);
        line-height: 38px;
        font-weight: 400;
        min-height: 68px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        word-break: break-all;
        margin: 15px 0 0;
      }
      .bottom_info {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        p:nth-child(1) {
          color: red;
          font-size: 32px;
        }
        del {
          color: #b7b6b7;
          margin-left: 10px;
          font-size: 22px;
        }
        .exchange-btn {
          padding: 0 0.2rem;
          height: 50px;
          line-height: 45px;
          background-color: #fff;
          border: 1px solid #28b46a;
          border-radius: 8px;
          @include sc(22px, #28b46a);
          &.no-stock {
            color: #fff;
            border: 1px solid #b7b6b7;
            background-color: #b7b6b7;
          }
        }
      }
      p {
        @include sc(24px, #8b8a8a);
      }
    }
  }
}
.end {
  background-color: #fff;
  @include sc(26px, #999);
  text-align: center;
  padding-bottom: 20px;
}

.router-slid-enter-active,
.router-slid-leave-active {
  transition: all 0.4s;
}
.router-slid-enter,
.router-slid-leave-active {
  transform: translate3d(2rem, 0, 0);
  opacity: 0;
}
input.van-field__control.van-field__control--center {
  background: #000;
}
</style>
